<template>
	<view class="complain-big-box flex-column flex-justify-content-space-between">
		<view class="navbar-box flex-row flex-center">
			<view class="vbox-left flex-column flex-center" @click="vadvise">
				<text class="fun-font-12px v-size">我要建议</text>
			</view>
			<view class="vbox-right flex-column flex-center" @click="vcomplain">
				<text class="fun-font-12px v-size">我要投诉</text>
			</view>
		</view>
		<view class="complain-img flex-column flex-aligin-items-center">
			<view class="img-box">
				<!-- 上传图片 -->
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-uploader">
							<view class="flex-direction-row-between img-box-header">
								<view class=" fun-font-14px">{{complainimg}}</view>
							</view>
							<sunui-upoos upload_count="5"></sunui-upoos>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="complain-conent flex-column flex-aligin-items-center">
			<view class="content-box">
				<view class="content-box-header">
					<text class=" fun-font-14px">{{complaintext}}</text>
				</view>
				<view class="content-box-text">
					<textarea name="contenttextarea" class="contenttextarea flex-center" placeholder="请输入您投诉的内容" maxlength="200"
					 @input="descInput" v-model="areadesc" />
					<view class="num fun-font-10px">{{textcount}}/200</view>
				</view>
			</view>
		</view>
		<view class="complain-btn flex-center">
			<button class="btn-size fun-img fun-font-16px" @click="complainbtn">{{submit}}</button>
		</view>
	</view>
</template>

<script>
	import sunuiUpoos from '@/components/sunui-upimg/sunui-upimg.vue'
	export default {
		components:{sunuiUpoos},
		data() {
			return {
				complaintext:'投诉内容',
				complainconten:'请输入您投诉的内容',
				complainimg:'添加图片',
				submit:'提交',
				areadesc:'',
				textcount:0,
				count:0,
			}
		},
		onUnload() {
		},
		methods: {
			//文字计数
			descInput(e){
				this.textcount = e.detail.value.length
			 },
			complainbtn(){
				uni.navigateTo({
					url:'../warrantymsg/warrantymsg?name=advise'
				})
			},
			vadvise(){
				uni.switchTab({
					url:'/pages/index/advise/advise'
				})
			},
			vcomplain(){
				uni.navigateTo({
					url:'/pages/index/advise/complain'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.complain-big-box{
	width: 100%;
	/* height: 1240rpx; */
	height: 100%;
	background-color: #efeff4;
	.navbar-box{
		width: 100%;
		height: 60rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #efeff4;
		.vbox-left{
			width: 30%;
			height: 60rpx;
			.v-size{
				line-height: 40rpx;
				text-align: center;
			}
		}
		.vbox-right{
			width: 30%;
			height: 60rpx;
			.v-size{
				color: #39B54A;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
	.complain-img{
		width: 100%;
	    height: 480rpx;
		background-color: #FFFFFF;
		.img-box{
			height: 400rpx;
			width: 90%;
			background-color: #FFFFFF;
			.img-box-header{
				height: 80rpx;
				width:100%;
				line-height: 90rpx;
				border-bottom: 4rpx solid #efeff4;
				.img-box-num{
					line-height: 100rpx;
					width: 30%;
					display: flex;
					flex-direction: row-reverse;
					justify-content: flex-start;
				}
			}
		}
	}
	.complain-conent{
	    width: 100%;
		height: 500rpx;
	    background-color: #FFFFFF;
		.content-box{
			height: 500rpx;
			width: 90%;
			background-color: #FFFFFF;
		 .content-box-header{
			 width: 100%;
			 height: 75rpx;
			 line-height: 80rpx;
			 border-bottom: 2rpx solid #efeff4;
		 }
		 .content-box-text{
			 width: 100%;
			 height: 400rpx;
			 margin-top:10rpx;
			 background-color: #efeff4;
			 .contenttextarea{
				 width: 100%;
				 height: 360rpx;
				 text-indent: 40rpx;
			 }
			 
		 .num{
				 width: 100%;
				 display: flex;
				 color: #666666;
				 background-color: #efeff4;
				 flex-direction: row-reverse;
				justify-content: flex-start;
			 }
		 }
	   }
	}
	.complain-btn{
		width: 100%;
		height: 150rpx;
		.btn-size{
			height: 90rpx;
			width: 90%;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
			background-color: #09bb07;
		}
	}
}
</style>
